<template>
	<view id="app">
		<view class="top" v-if="isLogin == 0">
			<image :src="course.thumb"></image>
		</view>
		<view class="top" v-else>
			<video :enable-progress-gesture="false" :src="course.file_attachment" v-if="course.filetype == 'mp4'"></video>
			<image :src="course.thumb" v-else></image>
			
		</view>
		<view class="desc">
			<view class="title">{{course.title}}</view>
			<view class="icon">
				<view class="left" @click="collection()">
					<uv-icon name="heart" size="40rpx" color="#333"></uv-icon>
					<view class="txt">收藏</view>
				</view>
				<view class="right"  @click="pupopen('share')">
					<uv-icon name="share" size="40rpx" color="#333"></uv-icon>
					<view class="txt">分享</view>
				</view>
			</view>
		</view>
		<view class="tab">
			<uv-tabs :list="tabs" lineWidth="80" 
				lineColor="#145cfe" 
				:activeStyle="{
					color: '#145cfe',

				}"
				:inactiveStyle="{
					color: '#909090',
				}" 
		itemStyle="width:300rpx;font-size:28rpx;font-weigh:400;height:80rpx;" @click="navclick"></uv-tabs>
		</view>
		<view class="content" v-if="index == 0">
			<uv-parse :content="course.content" :tagStyle="style"></uv-parse>
		</view>
		<view class="content" v-else>
			<view class="comment" v-if="comment.length >0">
				<view class="comment-list" v-for="(item,index) in comment" :key="index">
					<view class="comment-con">
						<view class="left">
							<uv-avatar size="100rpx" :src="item.user.avatar"></uv-avatar>
						</view>
						<view class="right">
							<view class="name">{{item.user.nickname}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="content">
								{{item.comment_remark}}
							</view>
						</view>
					</view>
					<view class="comment-back" v-if="item.is_reply == 1">
						<view class="back_title">管理员回复</view>
						<view class="back_content">{{item.reply}}</view>
					</view>	
				</view>
			</view>
		</view>

		<uv-popup ref="pingjia" mode="bottom" :close-on-click-overlay="false" :closeable="true" custom-style="min-height: 200rpx;" round="15rpx">
			<view class="pup-conation">
				<view class="pup-title">评价课程</view>
				<view class="plr30 ptb20 w100p bsb">
					<uv-textarea v-model="pingjia" placeholder="请输入内容"></uv-textarea>
				</view>
				<view class="plr20 ptb20">
					<uv-button text="提交评价" color="#145cfe" @click="submitpingjia()"></uv-button>
				</view>
			</view>
		</uv-popup>
		
		<uv-popup ref="share" mode="bottom" :close-on-click-overlay="false" :closeable="true" custom-style="min-height: 200rpx;" round="15rpx">
			<view class="pup-conation">
				<view class="pup-title">我要分享</view>
				<view class="pup-list">
					<view class="pup-item">
						<button type="default" class="pup-item-btn"  hover-class="none" @click="shareImg()">
							<view class="pup-btn-img">
								<image :src="Shareimg.png"></image>
							</view>
							<view class="pup-btn-txt">
								生成海报
							</view>
						</button>
					</view>
					<view class="pup-item">
						<button type="default" class="pup-item-btn" open-type="share"  hover-class="none">
							<view class="pup-btn-img">
								<image :src="Shareimg.jpg"></image>
							</view>
							<view class="pup-btn-txt">
								微信好友
							</view>
						</button>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="poster" mode="center" custom-style="min-height: 850rpx;" bgColor="">
			<view class="poster-popup">
				<view class="poster-img">
					<image :src="posterImg" mode="aspectFit"></image>
				</view>
				<view class="poster-Btn rows">
					<view class="posterBtn btnl f1" @click="hideImg()">
						取消
					</view>
					<view class="posterBtn btnr f1" @click="saveImg()">
						保存
					</view>
				</view>
			</view>
		</uv-popup>
		<view class="footer ft">
			<view class="bottom">
				<view class="icon" @click="reLaunch()">
					<uv-icon name="home" size="40rpx" color="#333"></uv-icon>
					<view class="txt">首页</view>
				</view>
				<view class="icon">
					<button type="default" open-type="contact" class="zixun"  hover-class="none">
					<uv-icon name="chat" size="40rpx" color="#333"></uv-icon>
					<view class="txt">咨询</view>
					</button>
				</view>
				<view class="icon" @click="collection()">
					<uv-icon name="heart" size="40rpx" color="#333"></uv-icon>
					<view class="txt">收藏</view>
				</view>
				<view class="icon" @click="pupopen('share')">
					<uv-icon name="share" size="40rpx" color="#333"></uv-icon>
					<view class="txt">分享</view>
				</view>
				<view class="btn" @click="pupopen('pingjia')">评价该课程</view>
			</view>
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				isLogin:0,
				tabs:[
					{name:"课程介绍"},{name:'课程评价'}
				],
				Shareimg:{
					png:this.util.config.host+"/static/images/sharepng1.png",
					jpg:this.util.config.host+"/static/images/sharepng2.png",
				},
				posterImg:"",
				style:{
					p:"font-size:30rpx;",
					image:'with:100%;height:auto;'
				},
				index:0,
				id:0,
				course:{
					title:"",
					thumb:"",
					content:"",
				},
				comment:[],
				pingjia:"",
				page:1,
				more:true,
				nodata:true,
			}
		},
		async onLoad(e) {

			that = this;
			await this.$onLaunched;
			
			if(uni.getStorageSync('QLXG_token')){
				this.isLogin = 1;
			}
			this.id = e.id;
			this.getcontent();
			this.getComment();
		},
		onShow(){
			if(uni.getStorageSync('QLXG_token')){
				this.isLogin = 1;
			}
			setTimeout(function(e){
				uni.setNavigationBarTitle({
					title:that.course.title
				})
			},500)
			
		},
		onReachBottom(){
			if(that.more == false){
				return false;
			}
			that.getComment();
		},
		onShareAppMessage: function (res) {
			let share = this.util.wxShare({title:this.course.title});
			return {
			      title: this.course.title,
			      path: share.path,
			      imageUrl: this.course.thumb // 分享卡片的图片
			}
		},
		methods: {
			navclick:function(e){
				this.index = e.index;
				console.log('item', e);
			},
			getComment:function(){
				let page = that.page
				this.request({
					url:"/api/course/comment",
					data:{id:this.id,page:page},
					success:function(res){
						if(res.code = 200){
							that.comment = res.data;
						
							if(page == 1){
								that.comment = res.data;
								if(res.data.length == 0){
									that.nodata=false;
								}
							}else{
								that.comment.push(...res.data)
								
							}
							that.more = res.data.length < 10 ? false : true;
							that.page=page+1;
						}
					}
				})
			},
			getcontent:function(){
				this.request({
					url:"/api/course/detail",
					data:{id:this.id},
					success:function(res){
						if(res.code = 200){
							that.course = res.data;
						}
						
					}
				})
			},
			//评价
			submitpingjia:function(){
				if(this.pingjia == ""){
					this.util.alert('请填写评价内容');
					return false;
				}
				this.request({
					url:"/api/course/pingjia",
					data:{id:this.id,pingjia:this.pingjia},
					success:function(res){
						if(res.code == 200){
							that.$refs.pingjia.close();
							that.util.alert("评价完成");
						}
					}
				})
			},
			//收藏
			collection(){
				if(this.isLogin == 0){
					uni.navigateTo({
						url:"/pages/member/index/login"
					})
					return false;
				}
				this.request({
					url:"/api/course/collection",
					data:{id:this.id},
					success:function(res){
						if(res.code == 200){
							that.util.alert("收藏成功");
						}
					}
				})
			},
			pupopen(e){
				if(this.isLogin == 0){
					uni.navigateTo({
						url:"/pages/member/index/login"
					})
					return false;
				}
				if(e == 'share'){
					this.$refs.share.open();
				}
				if(e == 'pingjia'){
					this.pingjia = "";
					this.$refs.pingjia.open();
				}
				if(e == 'poster'){
					this.$refs.share.close();
					this.$refs.poster.open();
				}
			},
			reLaunch:function(){
				uni.reLaunch({
					url:"/pages/index/index",
				})
			},
			shareImg(){
				that.$refs.share.close();
				uni.showLoading({
					title:'正在生成...'
				})
				that.request({
					url:'/api/share/course',
					data:{id:that.id},
					success:function(rlt){
						uni.hideLoading();
						if(rlt.code == 200){
							that.posterImg = rlt.data;
							that.$refs.poster.open();
						}
					}
				})
				
			},
			saveImg(){
				let img = that.posterImg;
				that.util.downloadImg(img);
			},
			hideImg(){
				that.$refs.poster.close();
			},
		}
	}
</script>

<style lang="less" scoped>
	.top{width:100%;height:420rpx; position: sticky;top:0;z-index: 1000;}
	.top video{width:750rpx;}
	.desc{display: flex; flex-direction: row; padding:15rpx; align-items: center;
		.title{flex:1;font-size: 32rpx;}
		.icon{display: flex; flex-direction: row; align-items: center;width:160rpx;
			.left{
				width:80rpx;font-size: 26rpx;
				display: flex;flex-direction: column; 
			}
			.right{
				width:80rpx;font-size: 26rpx;
				display: flex;flex-direction: column;
			}
		}
		
	}
	.tab{padding:0 15rpx;border-bottom: 1px solid #efefef; margin-bottom: 20rpx;}
	.content{padding:0 15rpx;}
	.comment{
		.comment-list{margin-bottom: 20rpx; padding:15rpx; display: flex;flex-direction: column;background-color: #fff;
			.comment-con{
				display: flex; flex-direction: row;
				.left{width:100rpx;}
				.right{flex:1;padding-left: 20rpx;display: flex; flex-direction: column;justify-content: center;
					.name{padding:15rpx 0; font-size: 30rpx;}
					.time{height:40rpx; font-size: 26rpx;color: #888;}
					.content{font-size: 30rpx;padding:0;}
				}
			}
			.comment-back{border-top: 1px solid #eee; padding-top: 15rpx; padding-left: 100rpx;margin-top: 30rpx;
				.back_title{font-size: 30rpx; color:#777;height:36rpx; margin:15rpx 0 ;border-left: 10rpx solid #145cfe;padding-left: 5rpx;}
				.back_content{font-size: 30rpx;}
			}
		}
	}
	.more-bata{display: flex; flex-direction: column; align-items: center;color:#c3c3c3;margin-top: 10px;margin-bottom: 50px;
		.more{width:130px;height: 50px;}
		.txt{font-size: 26rpx;}
		}
	.ft{background:#fff;}
	.bottom{
		display: flex; flex-direction: row;align-items: center;background-color: #fff; justify-content: center;
		.icon{
			width:120rpx;font-size: 28rpx;
			display: flex;flex-direction: column; align-items: center; justify-content: center;
		}
		.btn{flex:1;font-size: 30rpx;color:#fff;padding:28rpx;display: flex;flex-direction: column; align-items: center; justify-content: center;background-color: #145cfe;}
	}
	.pup-conation{display: flex; flex-direction: column; align-items: center;padding-top: 10rpx;
		background:#fdfdfd;overflow: hidden; border-radius: 10rpx 10rpx 0 0;}
	.pup-title{width:100%;line-height: 40px; font-size: 30rpx;color:#666; text-align: center;}
	.pup-list{background-color: #fff;display:flex;flex-direction: row; width:100%;}
	.pup-item{flex:1;display: flex; flex-direction: column;padding:30rpx 15rpx;}
	.pup-item-btn{background-color: #fff !important;border: 0 solid #fff;line-height: 1.0; font-size: 28rpx;}
	.pup-item-btn::after{border:initial;}
	.pup-item-btn .pup-btn-img{width:50px;height:50px;}
	.pup-item-btn .pup-btn-txt{padding:10rpx 0; font-size: 28rpx;}
	.pup-btn{background:#f6f6f6;height:40px; font-size: 14px;line-height: 40px;width:100%;text-align: center;}
	.poster-popup{width:720rpx;height:750rpx;}
	.poster-popup .poster-img{width:720rpx;height:750rpx;}
	.posterBtn{margin:15rpx 20rpx; padding:10rpx 15rpx; text-align: center;font-size: 26rpx; border-radius: 10rpx;}
	.btnl{background:#fff;border:1px solid #fff; color:#545454;}
	.btnr{background:#5D79FF;border:1px solid #5D79FF; color:#fff;}
	.zixun{background-color: #fff !important;border: 0 solid #fff !important;line-height: 1.0; font-size: 28rpx;display: flex; flex-direction: column;}
	.zixun::after{border:initial;}
</style>